<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>axios请求方法别名</h1>
    <button id="btn">发送请求</button>
    
    <script>
        /*
            创建一个axios实例，并配置这个实例
        */ 
    //  const deced因为最后还要接受返回的这个实例
        const deced = axios.create({
        //  配置基础路径  URL都是大写
            baseURL: '/',
            // 配置超时间
            timeout: 10000,
        //    配置请求头
            headers: {token: 'we.qw.eqw'}
        })
    //  给他设置一个拦截器
        // 什么是拦截器,就是你去拦截一个在请求或响应被 then 或 catch 处理前拦截它们。
        // 添加响应拦截器   use是上面的一个方法 里面接受两个回调函数
    //第一个参数是请求的过程,第二个参数是请求的过程中有什么意外,就放到第二个参数里面
    // use方法接受两个回调函数,正常都会进入到第一个回调函数中
    //   只有以下两种情况会触发异常处理的回调(了解):
    //     - use额外配置第三个参数options
    //     - 当同时设置多个同类型拦截器的时候,如果第二个拦截器中的处理出现错误,则会执行第一个拦截器中的异常处理函数
        //config这个就是我们的配置 
        deced.interceptors.response.use((config)=>{
        // console.log(config);
        //在请求拦截器中可以拿到axio的配置对象, 配置对象对config.headers.common是请求头的配置
        
        //在这里写一个提示,也可以写一个进度条
        alert("我要发请求了")
    
        // 最后一定要把config再返回出去(放行)
        return config;
    // 这里是接受错误或失败的信息
    },(err)=>{
            //  快速的把这个失败的信息快速的包装成一个失败的Promise实例
        return Promise.reject(err.message)
    }); 
    
    // 把结果返应出去
      
  //   请求一个按钮
      const oBtn=document.getElementById("btn");
       oBtn.onclick=async function (){
           const result=await deced.get("/user",{
            // 给他传一个配置
            params:{
                userId:"001"
            }
           })
           console.log(result,"result");
        }
    </script>
</body>
</html>